import React from 'react';
import ReactMarkdown from 'react-markdown';
import 'github-markdown-css/github-markdown.css'; // 引入 github-markdown-css
import { useModel } from 'umi'; // 使用 useModel 获取主题状态
import { ConfigProvider, theme } from 'antd'; // 引入 Ant Design 的 theme

const MarkdownViewer: React.FC<{ content: string }> = ({ content }) => {
  const { initialState } = useModel('@@initialState');
  const isDarkTheme = initialState?.settings?.navTheme === 'realDark'; // 判断是否为暗色主题

  // 动态设置 Markdown 容器的样式
  const markdownStyle = {
    backgroundColor: isDarkTheme ? '#141414' : '#ffffff', // 背景颜色
    color: isDarkTheme ? '#ffffff' : '#000000', // 文字颜色
    padding: '16px', // 内边距
    borderRadius: '8px', // 圆角
  };

  return (
    <div className="markdown-body" style={markdownStyle}>
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
};

export default MarkdownViewer;